<template>
    
    <div ref="chartEl" class="charDiv" :class="size">

    </div>
</template>

<script>
import echarts from 'echarts';

export default {
    props:{
        chrCfg:{},
        size:{default:"small"}
    },
    data() {
        var that = this;
        return {
            curChart: null,
            defX:{
                type : 'category',
                // name : '序号',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick:{
                    alignWithLabel:true,
                },
                // axisLabel: {
                //     rotate:40
                // }
            },
            defY:{
                type : 'value',
                // name : "当前金币",
                min: "dataMin",
                axisLabel: {
                    rotate:0,
                    formatter: (value, index)=> {
                        if(value>10000){
                            value = this.moneyFixed(value);
                        }
                        return value;
                    }
                }
            },
            defCfg:{
                title : {
                    text : "",
                },
                color: ['#aa0000',"#DABD38", '#B848FF', '#61a0a8', '#8f7065', '#304655', '#0f67e0', '#9e2ab1','#f58e0d',  '#27c6da'],
                grid: {
                    left: '100px',
                    // right: '0%',
                    top: "70px",
                    // bottom: '20%'
                },
                legend : {
                    data : [],
                    // selected: {"当前金币":true,"预设金币":true,"下一预设金币":true,"倍率":false},
                },
                // dataZoom : [ { type : 'inside'}],
                xAxis : {
                },
                yAxis: [
                    // {type:"value"}
                    // {
                    //     type : 'value',
                    //     // name : "当前金币",
                    //     min: "dataMin",
                    //     axisLabel: {
                    //         rotate:0,
                    //         formatter: (value, index)=> {
                    //             if(value>10000){
                    //                 value = this.moneyFixed(value);
                    //             }
                    //             return value;
                    //         }
                    //     }
                    // },
                    // {
                    //     name: '倍率',
                    //     nameLocation: 'end',
                    //     type: 'value',
                    //     axisLabel: {
                    //         rotate:40
                    //     },
                    //     // inverse: true
                    // }
                ],
                tooltip: {
                    trigger: 'axis',
                    formatter(datas){
                        var res = datas[0].name + '<br/>'
                        var otherInfo = "";
                        for (var i = 0, length = datas.length; i < length; i++) {
                            var curitem =datas[i];
                            var value = curitem.data;
                            if(typeof(value)=="Array"){
                                value = value[1];
                            }
                            if(isNaN(value)){
                                res += curitem.marker+ curitem.seriesName + '：' + value + '<br/>'
                            }else{
                                res += curitem.marker+ curitem.seriesName + '：' + that.bigMoneyFormat(value) + '<br/>'
                            }
                        }
                        res+=otherInfo;
                        if(that.chrCfg.tooltipFormatter){
                            var tmpinfo = that.chrCfg.tooltipFormatter(datas[0].dataIndex);
                            res+= tmpinfo || "";
                        }
                        return res
                    },
                },
                series : [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                    }
                ]

            }
        }
    },


    mounted() {
        this.initChart();
        const newoption = this.getChartOption();
        this.curChart.setOption(newoption);
    },
    computed:{
    },

    methods: {
        reDraw(){
            this.$nextTick((item)=>{
                const newoption = this.getChartOption();
                this.$emit("setChartOption",newoption)
                this.curChart.setOption(newoption);
            })
        },
        initChart(){
            if(!this.curChart){
                const container = this.$refs.chartEl;
                if (container) {
                    this.curChart = echarts.init( container );
                }
                this.curChart.on("click",(param)=>{
                    if(param.dataIndex){
                        this.$emit("onClickPoint",param.dataIndex);
                        // var memberId = this.chartData.total[param.dataIndex].memberId
                    }
                })
            }else{
                this.clearChartData();
            }
        },
        clearChartData(){
            var chart = this.curChart;
            if(chart){
                var option = chart.getOption();
                if(!option) return;
                option.series=[];
                chart.setOption(option,true)
            }
        },
        getChartOption(){
            var that = this;
            var option = Object.assign({},this.defCfg,this.chrCfg)
            if(option.xAxis.length || option.xAxis.length===0){
                var first = option.xAxis[0];
                var firstcfg = Object.assign({},this.defX,first);
                option.xAxis[0] = firstcfg;
            }else{
                option.xAxis = Object.assign({},this.defX,this.chrCfg.xAxis);
            }
            if(option.yAxis.length || option.yAxis.length===0){
                var first = option.yAxis[0];
                var firstcfg = Object.assign({},this.defY,first);
                option.yAxis[0] = firstcfg;
            }else{
                option.yAxis = Object.assign({},this.defY,this.chrCfg.yAxis);
            }
            // debugger;
            return option;
        },
        getOption(){
            return this.curChart.getOption();
        }
    }
}
</script>
<style lang="less" scoped>

.charDiv{
    width: 500px;
    height: 350px;
    // border:1px red solid;
}
.charDiv.high{
    width: 500px;
    height: 400px;
    // border:1px red solid;
}
.charDiv.mini{
    width: 400px;
    height: 300px;
}
.charDiv.normal{
    width: 700px;
    height: 500px;
}
.charDiv.large{
    width: 1200px;
    height: 700px;
}

</style>


